<template>
  <view class="container">
    <!-- 用户信息卡片 -->
    <view class="user-card">
      <view class="user-info">
        <view class="avatar-container">
          <image class="avatar" :src="userAvatar" mode="aspectFill" />
          <image class="avatar partner" :src="partnerAvatar" mode="aspectFill" />
        </view>
        <view class="user-details">
          <text class="user-name">{{ userName }}</text>
          <text class="relationship-info">与 {{ partnerName }} 在一起 {{ relationshipDays }} 天</text>
        </view>
      </view>
      <view class="points-summary">
        <view class="points-item">
          <text class="points-value">{{ userStore.userPoints }}</text>
          <text class="points-label">我的积分</text>
        </view>
        <view class="points-item">
          <text class="points-value">{{ userStore.partnerPoints }}</text>
          <text class="points-label">Ta的积分</text>
        </view>
        <view class="points-item">
          <text class="points-value">{{ totalPoints }}</text>
          <text class="points-label">总积分</text>
        </view>
      </view>
    </view>

    <!-- 功能菜单 -->
    <view class="menu-section">
      <view class="menu-group">
        <view class="menu-item" @tap="goToProfileEdit">
          <view class="menu-icon">
            <u-icon name="account" color="#ff6b81" size="32" />
          </view>
          <text class="menu-text">个人信息</text>
          <u-icon name="arrow-right" color="#ccc" size="20" />
        </view>
        
        <view class="menu-item" @tap="goToPartner">
          <view class="menu-icon">
            <u-icon name="heart" color="#ff6b81" size="32" />
          </view>
          <text class="menu-text">伴侣信息</text>
          <u-icon name="arrow-right" color="#ccc" size="20" />
        </view>
        
        <view class="menu-item" @tap="goToSettings">
          <view class="menu-icon">
            <u-icon name="setting" color="#ff6b81" size="32" />
          </view>
          <text class="menu-text">设置</text>
          <u-icon name="arrow-right" color="#ccc" size="20" />
        </view>
      </view>

      <view class="menu-group">
        <view class="menu-item" @tap="goToOrders">
          <view class="menu-icon">
            <u-icon name="order" color="#ff6b81" size="32" />
          </view>
          <text class="menu-text">我的订单</text>
          <u-icon name="arrow-right" color="#ccc" size="20" />
        </view>
        
        <view class="menu-item" @tap="goToPoints">
          <view class="menu-icon">
            <u-icon name="integral" color="#ff6b81" size="32" />
          </view>
          <text class="menu-text">积分中心</text>
          <u-icon name="arrow-right" color="#ccc" size="20" />
        </view>
        
        <view class="menu-item" @tap="goToEvents">
          <view class="menu-icon">
            <u-icon name="calendar" color="#ff6b81" size="32" />
          </view>
          <text class="menu-text">专属时刻</text>
          <u-icon name="arrow-right" color="#ccc" size="20" />
        </view>
      </view>

      <view class="menu-group">
        <view class="menu-item" @tap="contactSupport">
          <view class="menu-icon">
            <u-icon name="kefu-ermai" color="#ff6b81" size="32" />
          </view>
          <text class="menu-text">联系客服</text>
          <u-icon name="arrow-right" color="#ccc" size="20" />
        </view>
        
        <view class="menu-item" @tap="aboutApp">
          <view class="menu-icon">
            <u-icon name="info-circle" color="#ff6b81" size="32" />
          </view>
          <text class="menu-text">关于我们</text>
          <u-icon name="arrow-right" color="#ccc" size="20" />
        </view>
        
        <view class="menu-item" @tap="logout">
          <view class="menu-icon">
            <u-icon name="close" color="#ff6b81" size="32" />
          </view>
          <text class="menu-text">退出登录</text>
          <u-icon name="arrow-right" color="#ccc" size="20" />
        </view>
      </view>
    </view>

    <!-- 版本信息 -->
    <view class="version-info">
      <text class="version-text">恋爱餐厅 v1.0.0</text>
      <text class="copyright">让每一餐都充满爱意 ❤️</text>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useUserStore } from '@/store/modules/user'
import auth from '@/utils/auth'

const userStore = useUserStore()

// 计算属性
const userAvatar = computed(() => userStore.userAvatar)
const partnerAvatar = computed(() => userStore.partnerAvatar)
const userName = computed(() => userStore.userName)
const partnerName = computed(() => userStore.partnerName)
const relationshipDays = computed(() => userStore.relationshipDays)
const totalPoints = computed(() => userStore.totalPoints)
const level = computed(() => getLevelByPoints(userStore.totalPoints))

// 方法
const getLevelByPoints = (points) => {
  if (points < 100) return 'LV.1 新手'
  if (points < 300) return 'LV.2 恋人'
  if (points < 600) return 'LV.3 情侣'
  if (points < 1000) return 'LV.4 伴侣'
  if (points < 1500) return 'LV.5 爱人'
  return 'LV.6 灵魂伴侣'
}

const goToProfileEdit = () => {
  uni.navigateTo({ url: '/pages/profile/info' })
}

const goToPartner = () => {
  uni.navigateTo({ url: '/pages/profile/info' })
}

const goToSettings = () => {
  uni.navigateTo({ url: '/pages/profile/settings' })
}

const goToOrders = () => {
  uni.switchTab({ url: '/pages/order/index' })
}

const goToPoints = () => {
  uni.navigateTo({ url: '/pages/points/index' })
}

const goToEvents = () => {
  uni.navigateTo({ url: '/pages/event/index' })
}

const contactSupport = () => {
  uni.showModal({
    title: '联系客服',
    content: '客服电话：400-123-4567\n客服微信：LoveRestaurant\n工作时间：9:00-21:00',
    showCancel: false,
    confirmText: '知道了'
  })
}

const aboutApp = () => {
  uni.showModal({
    title: '关于恋爱餐厅',
    content: '恋爱餐厅是一款专为情侣设计的点餐应用。\n\n我们致力于为每一对情侣提供温馨、浪漫的用餐体验，让每一餐都充满爱意。',
    showCancel: false,
    confirmText: '了解'
  })
}

const logout = () => {
  uni.showModal({
    title: '退出登录',
    content: '确定要退出登录吗？',
    success: async (res) => {
      if (res.confirm) {
        try {
          uni.showLoading({ title: '退出中...' })
          
          // 清除用户数据
          const userStore = useUserStore()
          userStore.logout()
          
          // 清除本地存储
          uni.removeStorageSync('token')
          uni.removeStorageSync('userInfo')
          
          uni.hideLoading()
          uni.showToast({
            title: '已退出登录',
            icon: 'success'
          })
          
          // 跳转到登录页
          setTimeout(() => {
            uni.reLaunch({
              url: '/pages/login/index'
            })
          }, 1500)
          
        } catch (error) {
          uni.hideLoading()
          uni.showToast({
            title: '退出失败',
            icon: 'none'
          })
        }
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background: #f5f5f5;
  min-height: 1334rpx;
}

.user-card {
  background: linear-gradient(135deg, #ff6b81, #ff8fa3);
  border-radius: 20rpx;
  padding: 40rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(255, 107, 129, 0.3);
  
  .user-info {
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;
    
    .avatar-container {
      position: relative;
      width: 120rpx;
      height: 100rpx;
      margin-right: 30rpx;
      
      .avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        border: 3rpx solid #fff;
        position: absolute;
        left: 0;
        top: 10rpx;
        
        &.partner {
          left: 40rpx;
          top: 10rpx;
          z-index: -1;
}
      }
    }
    
    .user-details {
      .user-name {
        font-size: 36rpx;
        font-weight: bold;
        color: #fff;
        display: block;
        margin-bottom: 8rpx;
}
      
      .relationship-info {
        font-size: 26rpx;
        color: rgba(255, 255, 255, 0.9);
}
    }
  }
  
  .points-summary {
    display: flex;
    justify-content: space-around;
    
    .points-item {
      text-align: center;
      
      .points-value {
        font-size: 36rpx;
        font-weight: bold;
        color: #fff;
        display: block;
        margin-bottom: 4rpx;
}
      
      .points-label {
        font-size: 24rpx;
        color: rgba(255, 255, 255, 0.8);
}
    }
  }
}

.menu-section {
  .menu-group {
    background: #fff;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
    
    .menu-item {
      display: flex;
      align-items: center;
      padding: 30rpx;
      border-bottom: 1rpx solid #f5f5f5;
      
      &:last-child {
        border-bottom: none;
}
      
      &:active {
        background: #f8f8f8;
}
      
      .menu-icon {
        margin-right: 20rpx;
}
      
      .menu-text {
        flex: 1;
        font-size: 28rpx;
        color: #333;
}
    }
  }
}

.version-info {
  text-align: center;
  padding: 40rpx 0;
  
  .version-text {
    font-size: 24rpx;
    color: #999;
    display: block;
    margin-bottom: 8rpx;
}
  
  .copyright {
    font-size: 22rpx;
    color: #ccc;
}
}
</style>